<template>
  <div id="app">
    <h1>我是父组件</h1>

    <!-- 
          自定义事件,程序员自己定义的事件！！！

          事件源:MySon组件标签
          事件类型:erha(自定义类型)
          事件的回调函数:handler

          怎么触发自定义事件:在事件源(组件)内部通过$emit方法手动触发自定义事件！！！！
        -->

    <MySon @daju="handler"></MySon>

    <!-- 
        事件源:MySon1组件的实例
       -->
    <MySon1 ref="cur"></MySon1>
  </div>
</template>

<script>
import MySon from "./components/MySon";
import MySon1 from "./components/MySon1";

export default {
  name: "App",
  components: {
    MySon,
    MySon1,
  },
  methods: {
    handler(params1, params2) {
      console.log("父组件", params1, params2);
    },
  },

  //当组件挂载完毕执行一次----mounted
  mounted() {
    //当mounted执行完毕,组件都挂载完毕，渲染完毕。
    //ref能获取到什么呀?真实DOM节点、还可以获取组件实例VC
    //获取事件源:MySon1组件的实例VC
    // console.log(this.$refs.cur);
    // console.log(this, "这个this即为App组件实例VC");


    //$on|$emit都是Vue.prototype原型对象的方法：vm可以使用,vc可以使用！！！
     //下面的代码代表含义是：给事件源MySon1组件实例绑定一个自定义事件car
     //第一个参数:自定义事件名字    第二个参数:自定义事件的回调
     this.$refs.cur.$on('car',(params)=>{
       console.log(params)
     })




 //错误的想法:
     //相当于给app组件实例绑定事件[div] 、触发的时候却点击【Myson组件实例】p->驴唇不对马嘴！！！
    //  this.$on('car',(params)=>{
    //      console.log(params);
    //  })

  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
  background: #bef;
}
</style>
